<template class="firstpage">
  <div>
    <div class="boxMargin" @click="ladingRegion">
      <el-card class="box-card">
        <el-row class="margin" :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">taskId：</el-col>
              <el-col :span="14">
                <el-input v-model="searchData.taskId" placeholder="请输入taskId" />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">任务名称：</el-col>
              <el-col :span="14">
                <el-input v-model="searchData.taskName" placeholder="请输入任务名称" />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">启用状态：</el-col>
              <el-col :span="14">
                <el-select v-model="searchData.enableFlag" placeholder="请选择">
                  <el-option
                    v-for="task in customData.enableFlag"
                    :key="task.value"
                    :label="task.label"
                    :value="task.value"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="margin">
          <el-col :span="24" class="right">
            <el-button type="success" @click="onSearch">查询</el-button>
            <el-button @click="onReset">清空</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="boxMargin">
      <el-card class="box-card">
        <div slot="header">
          <div class="contion-header" style="width:10%;">
            <span>子任务管理列表</span>
          </div>
          <div class="contion-header text-r" style="width:89%;">
            <el-button type="primary" @click="onAdd">添加任务</el-button>
          </div>
        </div>
        <div>
          <el-table
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="id" label="id" />
            <el-table-column prop="taskType" label="任务类型" />
            <el-table-column prop="taskName" label="任务名称" />
            <el-table-column prop="enableFlag" label="启用状态">
              <template slot-scope="scope">
                <span v-if="scope.row.enableFlag == 0">关闭</span>
                <span v-else-if="scope.row.enableFlag == 1">开启</span>
                <span v-else />
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="lastModifyTime" label="更新时间" />
            <el-table-column label="操作" width="200px">
              <template slot-scope="scope">
                <!--                                <el-button type="text" @click="publish(scope.row)" v-if="scope.row.retResult !== 0">自营发布</el-button>-->
                <el-button
                  v-if="scope.row.enableFlag === 1 && scope.row.id != ''"
                  size="small"
                  @click="onDisable(scope.row)"
                >停用
                </el-button>
                <el-button
                  v-if="scope.row.enableFlag === 0 && scope.row.id != ''"
                  size="small"
                  @click="onEnable(scope.row)"
                >启用
                </el-button>
                <el-button size="small" @click="onUpdate(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>

    <div class="marginTop20 center">
      <template>
        <PAGER ref="wptxPager" @search="onChangePage" />
      </template>
    </div>
    <el-dialog :title="customData.taskTitle" :visible.sync="customData.taskModel" width="40%" center>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px" class="demo-ruleForm">
        <el-form-item label="任务名称：" prop="taskName">
          <el-input v-model="form.taskName" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="任务描述：" prop="taskDesc">
          <el-input v-model="form.taskDesc" placeholder="请输入任务描述" />
        </el-form-item>
        <el-form-item label="任务起止时间：" prop="taskTime">
          <!-- <el-date-picker v-model="form.taskTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format='yyyy-MM-dd HH:mm:ss' value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> -->
          <el-time-picker v-model="form.taskStartTime " placeholder="开始时间" value-format="HH:mm:ss" />
          &nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;
          <el-time-picker v-model="form.taskEndTime" placeholder="结束时间" value-format="HH:mm:ss" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">确认</el-button>
          <el-button @click="customData.taskModel = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import _validate from '../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../framework/commonJs/wptx_tools'
import _api from '@/framework/API/enableTask'
import { PAGER } from '@/framework/commonTemplate/'

const _FUNCTION_NAME = ''
export default {
  components: { PAGER },
  filters: {
    taskTypeFif(data) {
      let value = ''
      if (data === 0) {
        value = '商品'
      } else if (data === 1) {
        value = '商品图片'
      } else if (data === 2) {
        value = '商品文描'
      } else if (data === 3) {
        value = '商品分类属性'
      } else if (data === 4) {
        value = '商品视频'
      } else if (data === 5) {
        value = 'hostupc'
      } else if (data === 6) {
        value = '分类'
      } else if (data === 7) {
        value = '分类属性值'
      } else if (data === 8) {
        value = '分类、分组、属性关系'
      } else if (data === 9) {
        value = '全量同步全球购商品价格到mq'
      } else if (data === 10) {
        value = 'jddj末级分类获取'
      } else {
        value = ''
      }
      return value
    }
  },
  data() {
    return {
      tableData: [],
      searchData: {
        taskType: '', // 任务类型，0：商品，1：商品图片，2：商品文描，3：商品分类属性，4：商品视频，5：hostUpc
        enableFlag: '', // 任务状态 0：未执行；1：成功；2：失败；3：处理中
        taskId: '', // master_sync_task表主键ID
        platformId: '', // 第三方平台id
        taskName: '' // 任务名称
      },
      searchDataBuffer: {
        taskType: '',
        enableFlag: '',
        taskId: '',
        platformId: '',
        taskName: '' // 任务名称
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },
      dialogData: {},
      historyData: {},
      infoData: {},
      filterText: '',
      customData: {
        taskType: [
          { label: '商品', value: 0 },
          { label: '商品图片', value: 1 },
          { label: '商品文描', value: 2 },
          { label: '商品分类属性', value: 3 },
          { label: '商品视频', value: 4 },
          { label: 'hostupc', value: 5 },
          { label: '分类', value: 6 },
          { label: '分类属性值', value: 7 },
          { label: '分类、分组、属性关系', value: 8 }
        ],
        enableFlag: [
          { label: '关闭', value: 0 },
          { label: '开启', value: 1 }
        ],
        commodValue: {
          contentId: ''
        },
        commoditiesDate: [],
        taskTitle: '',
        taskModel: false
      },
      form: {
        id: '',
        taskName: '',
        taskDesc: '',
        taskStartTime: '',
        taskEndTime: ''
      },
      rules: {
        taskName: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        taskDesc: [
          { required: true, message: '请输入任务描述', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
  },
  created() {
  },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },
  beforeDestroy() {
  },
  methods: {
    onInit(data) {
      const self = this
      _api.page(self, self.$refs.wptxPager.pageData, self.callBack_page, self.searchData)
    },
    onSearch() {
      const self = this
      const params = self.searchData
      self.searchDataBuffer = _tools.cloneObj(self.searchData)
      self.$refs.wptxPager.resetPageNo()
      _api.page(self, self.$refs.wptxPager.pageData, self.callBack_page, params)
    },
    onChangePage(data) {
      const self = this
      const params = self.searchDataBuffer
      _api.page(self, self.$refs.wptxPager.pageData, self.callBack_page, params)
    },
    onReset(data) {
      const self = this
      _tools.reset(self.searchData)
      _tools.reset(self.searchDataBuffer)
      self.onInit()
    },
    onAdd(data) {
      const self = this
      self.customData.taskTitle = '添加任务'
      self.customData.taskModel = true
      _tools.reset(self.form)
      self.$nextTick(() => {
        self.$refs['form'].clearValidate()
      })
    },
    onDelete(data) {
      const self = this
    },
    onInfo(data) {
      const self = this
    },
    onUpdate(data) {
      const self = this
      _api.detail(self, data.id, self.callBack_detail)
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() {
    },
    onDisable(data) {
      const self = this
      const params = {
        enableFlag: 0,
        taskId: data.id
      }
      _api.taskDisEnable(self, params, this.onInit)
    },
    onEnable(data) {
      const self = this
      const params = {
        enableFlag: 1,
        taskId: data.id
      }
      _api.taskDisEnable(self, params, this.onInit)
    },
    onUpload(data) {
    },
    onBathUpload() {
    },
    onExport(data) {
    },
    onDownload(data) {
    },
    onHistory(data) {
    },
    callBack_page(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        self.tableData = data.result
        self.$refs.wptxPager.updatePageData(data)
      }
    },
    callBack_detail(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '详情查询超时，请稍后重试', 'warning')
      } else {
        self.customData.taskTitle = '编辑任务'
        self.customData.taskModel = true
        self.form = data.data
        self.$nextTick(() => {
          self.$refs['form'].clearValidate()
        })
      }
    },
    callBack_addOrUpdate(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '修改超时，请稍后重试', 'warning')
      } else {
        _validate.openTip(self, '成功', 'warning')
      }
    },
    ladingRegion() {
      this.customData.treeModel = false
    },
    handleSelectionChange(val) {
      this.customData.multipleSelection = val
    },
    submitForm(formName) {
      const self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            taskDesc: self.form.taskDesc,
            taskName: self.form.taskName,
            taskStartTime: self.form.taskStartTime,
            taskEndTime: self.form.taskEndTime
          }
          if (self.customData.taskTitle == '添加任务') { // 新建
          } else if (self.customData.taskTitle == '编辑任务') {
            params.id = self.form.id
          }
          _api.addOrUpdate(self, params, self.callBack_addOrUpdate)
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
    .contion-header {
        display: inline-block;
        box-sizing: border-box;
    }
    .text-r{
        text-align: right;
    }
</style>
